w-50 mx-auto

html bootstrap5 Sample

フロートを解除する:clearfix


右フロート
  <!-- afterでフロート解除が行われるので、フロートではないコンテンツが回り込まずに別ブロックに表示される -->
  <!-- 重なっていない浮いているから背景色出る -->
  <!-- 幅50でmx-autoで赤色を指定している -->
  <div class="w-50 mx-auto bg-danger clearfix">
    <div class="float-right bg-success">右フロート</div>
  </div>

フロートを解除しない(重なっているので背景色がでない)


右フロート
  <div class="w-50 mx-auto bg-danger">
    <div class="float-right bg-success">右フロート</div>
  </div>

テキストが折り返さないように設定する:text-nowrap


途中で折り返しなし 折り返しても良い
  <table class="w-50 mx-auto">
    <tr>
      <th class="text-nowrap">途中で折り返しなし</th>
      <td>折り返しても良い</td>
    </tr>
  </table>